<template>
  <van-sticky>
    <van-search
      v-model="searchValue"
      shape="round"
      placeholder="搜索课程名称"
      input-align="center"
      @search="onSearch"
    >
      <template #left>
        <svg class="icon mr4 ft32" aria-hidden="true" @click="$goPage(-1)">
          <use xlink:href="#icon-back"></use>
        </svg>
      </template>
    </van-search>
    <van-dropdown-menu class="mb8" active-color="#2D65AC">
      <van-dropdown-item :title="typeName" ref="typeRef">
        <dataFilter
          v-model="active"
          :list="typeList"
          @confirm="onConfirm"
        ></dataFilter>
      </van-dropdown-item>
    </van-dropdown-menu>
  </van-sticky>
  <div class="list backgroundWhite p16">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="u-f u-f-wrap u-f-jsb">
        <div
          class="blockItem mb8"
          v-for="(item, index) in list"
          :key="index"
          @click="clickCell(item.id)"
        >
          <div class="box-img">
            <img v-default-img :src="$oss + item.course_cover" alt="" />
          </div>
          <div class="m8">
            <div class="ft32 ellipsis-1 fb">{{ item.course_name }}</div>
            <div class="ft26 ellipsis-1 mv8">
              主讲专家：{{ item.expert_name }}
            </div>
            <div class="ft24 ellipsis-1">
              对象：{{ item.courseObj }}- -{{ item.course_time }}课时
            </div>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script setup>
import dataFilter from '@/components/data-filter.vue'
import cardList from '@/components/cardList.vue'
import { ref, getCurrentInstance, onBeforeMount } from 'vue'
import { courseObjList } from '@/utils/model/index.js'
const list = ref([])
const page = ref(1)
const limit = 6
const loading = ref(false) //是否加载状态
const finished = ref(false) //是否已加载完成
const searchValue = ref('') //搜索关键字
let active = ref(0) //选中视频类型index
let typeRef = ref(null)
let typeName = ref('全部')
const typeList = ref({}) //类型列表
const instance = getCurrentInstance()
const _this = instance.appContext.config.globalProperties

onBeforeMount(async () => {
  let res = await _this.$api.course.getCourseType()
  typeList.value = res.data
})
const onLoad = () => {
  // 异步更新数据
  _this.$api.course
    .getCourseList({
      page: page.value,
      limit,
      name: searchValue.value,
      type: active.value
    })
    .then((res) => {
      res.data = res.data.map((item) => {
        item.courseObj = item.course_object
          .map((obj) => courseObjList[obj])
          .join('、')
        return item
      })
      list.value = list.value.concat(res.data)
      page.value++
      // 加载状态结束
      loading.value = false

      // 数据全部加载完成
      if (list.value.length >= res.meta.total) {
        finished.value = true
      }
    })
}
//点击搜索事件
const onSearch = (val) => {
  initEvent()
}
const initEvent = () => {
  // 初始化列表加载状态
  page.value = 1
  list.value = []
  finished.value = false
  loading.value = true
  onLoad()
}
//点击活动列表跳转页面事件
const clickCell = (id) => {
  _this.$toPage('/courseDetail/' + id)
}
// 筛选点击确认
const onConfirm = () => {
  typeName.value = typeList.value[active.value]
  active.value && initEvent()
  typeRef.value.toggle()
}
</script>

<style scoped lang="scss">
:deep(.van-dropdown-menu__item) {
  flex: none;
  margin-left: 8px;
}
.blockItem {
  @include blockItem;
}
</style>
